<template>
	<view class="app-page safe-area">
		<view class="h1">
			借条签署一站式 财产安全有保障
		</view>
		<image class="home-state-icon" mode="scaleToFill" src="/static/images/home-state.png" />
		<image class="home-bg-icon" mode="scaleToFill" src="/static/images/home-bg.png" />
		<view class="cerate-btn" @click="handleCreate">
			创建借条
		</view>
		<view class="instruction" @click="handleView">
			更多说明
			<uni-icons class="icon" type="help" color="#1677ff" size="18"></uni-icons>
		</view>
		<uni-popup ref="roleRefs" type="bottom" onClose="handlePopupClose">
			<view class="popup-content">
				<view class="popup-title">
					选择角色
				</view>
				<grid items="{{roleTypes}}" onTap="handleTapItem" columns="{{2}}" iconSize="90">
				</grid>
			</view>
		</uni-popup>
		<AuthLogin ref="handleRef_authLogin" onLogin="handleLoginSuccess" />
	</view>
</template>

<script>
	import AuthLogin from '@/components/authLogin/index'
	import {
		apiVlidationToken,
		apiFaceCertify
	} from '@/api/common'
	import {
		ageCheck
	} from '@/utils/common'
	export default {
		components: {
			AuthLogin
		},
		data() {
			return {
				visible: false,
				roleTypes: [{
						title: '我是出借人',
						roleType: 0,
						icon: '/static/images/chujieren.png',
					},
					{
						title: '我是借款人',
						roleType: 1,
						icon: '/static/images/jiekuanren.png',
					},
				],
			}
		},
		onShareAppMessage() {
			// 返回自定义分享信息
			return new Promise((resolve, reject) => {
				resolve({
					title: '签鸽小程序',
					desc: '借条签署一站式 财产安全有保障',
					path: `pages/home/index`,
					bgImgUrl: "https://jianshang-qiange-daily.oss-cn-beijing.aliyuncs.com/36b4e2b87cdf450cb93787d38d69a439.jpg",

				})
			});
		},
		methods: {
			// 授权登录成功
			handleLoginSuccess(userInfo) {
				console.log(userInfo, 'handleLoginSuccess--userInfo');
				if (ageCheck(userInfo.memberIdNumber)) {
					this.setData({
						visible: true
					})
				} else {
					my.alert({
						title: '提示',
						content: '为减少用户签订借条时产生的纠纷，签鸽仅向22-75岁的中国大陆公民提供电子借条服务。'
					})
					return
				}
			},
			// 选择角色
			handleTapItem(item) {

				let roleType = null
				roleType = item.roleType
				uni.navigateTo({
					url: `/pages/create/index?roleType=${roleType}`
				})
				this.handlePopupClose()
			},
			// 创建借条,弹出选择角色弹窗
			handleCreate() {
				const _this = this
				apiVlidationToken().then(res => {
					console.log(res, '///////////////', this);
					const {
						userInfo
					} = _this.$store.state
					if (res.data && userInfo.memberIdNumber) {
						// 校验年龄 22-75
						if (ageCheck(userInfo.memberIdNumber)) {
							_this.$refs.roleRefs.open()
						} else {

							uni.showModal({
								title: '提示',
								content: '为减少用户签订借条时产生的纠纷，签鸽仅向22-75岁的中国大陆公民提供电子借条服务。'
							})
							return
						}

					} else {
						_this.authRef.handleOpen()
					}
				})
			},
			// 查看更多说明
			handleView() {

				uni.navigateTo({
					url: '/pages/article/article?type=howToUse&id=2'
				})
			},
			// 关闭弹层
			handlePopupClose() {
				this.visible = !this.visible
			},
			// 授权组件挂在
			handleRef_authLogin(ref) {
				this.authRef = ref;
			},
		}
	}
</script>

<style scoped lang="scss">
	.app-page {
		overflow-y: auto;
		min-height: 100vh;
		padding-top: 120px;
		box-sizing: border-box;
		background: linear-gradient(180deg, #94CEFD 0%, #CAE7FF 46%, #EEF7FF 100%);

		.h1 {
			height: 48rpx;
			font-size: 40rpx;
			font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
			font-weight: bold;
			color: #333333;
			line-height: 56rpx;
			text-align: center;
		}

		.home-state-icon {
			width: 466rpx;
			height: 138rpx;
			margin-left: 142rpx;
			margin-top: 48rpx;
		}

		.home-bg-icon {
			width: 587rpx;
			height: 400rpx;
			margin-top: 137rpx;
			margin-left: 101rpx;
		}

		.cerate-btn {
			width: 654rpx;
			height: 98rpx;
			font-size: 36rpx;
			font-family: PingFangSC, PingFang SC;
			color: #FFFFFF;
			line-height: 98rpx;
			background: linear-gradient(180deg, #1C54E7 0%, #367DFF 50%, #1677FF 100%);
			border-radius: 49rpx;
			text-align: center;
			margin: 155rpx auto 30rpx;
		}

		.instruction {
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			color: #1677FF;
			line-height: 45rpx;
			text-align: center;
		}

		.instruction .icon {
			margin-left: 4rpx;
		}

	}

	.popup-content {
		padding-bottom: 80rpx;
	}

	.popup-title {
		font-size: 36rpx;
		font-family: PingFangSC, PingFang SC;
		color: #333333;
		line-height: 50rpx;
		padding: 24rpx 0 32rpx;
		text-align: center;
		font-weight: bold;
	}
</style>